<template>
    <div>
        <slidebar></slidebar>
		<div class="layui-body" style="padding-top:70px;">
			<span class="layui-breadcrumb" style="visibility: visible;margin-left: 30px;">
			  <a href="javascript:;"><router-link to="activityList">晒晒活动</router-link></a>
			  <span lay-separator="">/</span>
			  <a href="javascript:;"><router-link to="activityList">活动列表</router-link></a>
			  <span lay-separator="">/</span>
			  <a href="javascript:;">活动详情</a>
			</span>
			<div style="padding: 20px 30px;border-top: 1px solid #F0F0F0;">
			    <table class="layui-table"  lay-skin="nob">
				  <tbody>
				    <tr>
				      <td><span>活动话题：</span>{{title}}</td>
				    </tr>
				    <tr>
				      <td><span>活动时间：</span>{{created_at}} - {{deleted_at}}</td>
				    </tr>
				    <tr>
				      <td><span>活动状态：</span>
				      	<p v-if="status == 0">未开始</p>
				      	<p v-if="status == 1">预热中</p>
				      	<p v-if="status == 2">进行中</p>
				      	<p v-if="status == 3">已结束</p>
				      </td>
				      <td><span>参与人次：</span>{{'member_count'}}</td>
				      <td><span>已推荐数：</span>590</td>
				      <td><span>获赞总数：</span>{{'like_count'}}</td>
				      <td><span>获奖人：</span>17826811961</td>
				      <!--<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>-->
				    </tr>
				    <tr>
				      <td><span>活动奖品：</span>
				      	<p v-for="item in prizeList"></p>
				      </td>
				    </tr>
				  </tbody>
				</table> 
			    <table class="layui-table" >
				  	<thead>
					    <tr>
					      <th>序号</th>
					      <th>微信昵称</th>
					      <th>参与时间</th>
					      <th>发布内容</th>
					      <th>参与次数</th>
					      <th>点赞数</th>
					      <th>推荐</th>
					      <th>操作</th>
					    </tr>
					</thead>
					<tbody>
				    	<tr v-for="">
				          <td>0</td>
					      <td><img src="" alt="" />HY</td>
					      <td>2018-11-11</td>
					      <td @click="Detail" class="Detail"><img src="" alt="" />内容文字介绍</td>
					      <td>12</td>
					      <td>88</td>
					      <td>未推荐</td>
					      <td class="caozuo">
					      	<a class="edit" href="javascript:;">推荐</a>
					      	<a class="edit" href="javascript:;">取消推荐</a>
					      </td>
				    	</tr>
				   </tbody>
				</table>
				<div id="demo1" style="float: right;"></div>
			</div>
		</div>
    </div>
</template>
<script>
import slidebar from '../components/slidebar'
export default {
  name: '',
  data () {
    return {
      xixi:123132132,
      activityList:[],//活动列表
      id:'',
      created_at:'',
      deleted_at:'',
      created_at:'',
      title:'',
      status:'',
      prizeList:[],
    }
  },
  components:{
      slidebar:slidebar
  },
  created(){
  	var that = this
  	that.id = that.$route.params.id
	console.log(that.id)
  	that.$axios.get('/apis/web/v1/admin/activity/detail/'+that.id,{params:{
  	}}).then((res)=>{
		console.log(res)
		if(res.data.errCode == 0){
			that.created_at = res.data.data.created_at
			that.deleted_at = res.data.data.deleted_at
			that.title = res.data.data.title
			that.status = res.data.data.status
//			that.member_count = res.data.data.member_count
//			that.like_count = res.data.data.like_count
			if(res.data.data.prize){
				for(var i=0; i<res.data.data.prize.length; i++){
					that.prizeList.push(res.data.data.prize[i])
				}
			}
		}
	})
  },
  methods:{
  	del:function(index){
  		console.log(index,'index')
  		var that = this; 
  		layer.open({
		  content: '确定删除这个活动？'
		  ,btn: ['确定', '取消']
		  ,yes: function(index, layero){
	      	that.$axios.get('/apis/web/v1/admin/activity/del',{params:{
				id:that.id
			}}).then((res)=>{
				console.log(res)
				layer.closeAll();
			})
		  }
		  ,btn2: function(index, layero){
		  }
		  ,cancel: function(){ 
		    //右上角关闭回调
		    //return false 开启该代码可禁止点击该按钮关闭
		  }
		});
  	},
  	Detail:function(){
  		var that = this
  		layer.open({
        type: 1
        ,title: '内容详情' //标题栏
        ,closeBtn: false
        ,area: '400px;'
        ,shade: 0.5
        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        ,btn: ['确定']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><img src="" alt="" />' + that.xixi +'</div>'
        ,success: function(layero){
        }
      });
  	}
  },
}

</script>
<style type="text/css">
	.caozuo a{
		color: #01AAED;
		cursor: pointer;
	}
	.caozuo a:hover{
		color: #666666;
		cursor: pointer;
	}
	.layui-table span{
		color: #009587;
	}
	.layui-table p{
		display: inline;
	}
	tr:hover{
		background: #fff!important;
	}
	td:hover{
		background: #fff;
	}
	.Detail{
		cursor: pointer;
	}
	.Detail:hover{
		background: #f1f1f1;
	}
</style>
